import { Toast, WingBlank } from 'antd-mobile';
import React, { ReactElement, useEffect } from 'react';
import styles from './index.less';
import ReceivedInfo from './ReceivedInfo'
import { connect, history } from 'umi'
import { ConnectState, ConnectProps, CartModelState, CartProductType } from '@/models/types'
import NodeListPage from './NodeList'
import PayBar from './PayBar'

interface Props extends ConnectProps {
  /**
   * checkedCart
   */
  cart: CartModelState
}
function confirmBillPage({ cart }: Props): ReactElement {
  /** checked */
  const { data } = cart
  /** 没有数据，返回上一页 */
  useEffect(() => {
    if (!data.length) {
      Toast.info('请重新进入确认订单页')
      history.go(-1)
    }
  }, [])

  return (
    <WingBlank size='lg'>
      <ReceivedInfo></ReceivedInfo>
      {data.length && data.map((product: CartProductType) => (<NodeListPage key={product.id} {...product}></NodeListPage>))}
      <PayBar data={data}></PayBar>
    </WingBlank>
  );
}

export default connect(({ cart }: ConnectState) => ({ cart }))(confirmBillPage)